<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script >
// 解决ERROR ResizeObserver loop completed with undelivered notifications.
//问题的
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};
// 解决ERROR ResizeObserver loop completed with undelivered notifications.
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
};
</script>
<style>
html, body {
  height: 100%; /* 使 html 和 body 填满整个视口 */
  margin: 0;    /* 清除默认边距 */
  padding: 0;   /* 清除默认内边距 */
  font-family: Avenir, Helvetica, Arial, sans-serif;
  /*overflow: hidden; !*隐藏滚动条 *!*/
}

#app {
  height: 100%; /* 让 #app 占满整个页面 */
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: visible; /* 防止子元素被裁剪 */
  position: relative; /* 确保定位上下文 */
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
